<template>
	<h3>1. 将style属性值绑定为对象</h3>
	<div style="width: 100px;height: 200px;background-color: chocolate;">对象</div>
	<br />
	<div :style="{width:widthv,height: heightv,backgroundColor: backgroundColorV}">对象</div>
	<h3>2. 将style属性绑定为数组</h3>
	<div :style="[objectClas1,objectClas2]">数组</div>
	
</template>

<script setup>
	//1. 将style属性值绑定为对象
	import {ref,reactive} from 'vue'
	const widthv=ref('100px')
	const heightv=ref('200px')
	const backgroundColorV=ref('chocolate')
	
	const objectClas1=reactive({
		width:'50px',
		height:'50px',
		backgroundColor:'blue'
	})
	
	const objectClas2=reactive({
		color:'pink'
	})
</script>

<style>
</style>